<template>
	<div class="app">
		<!-- 消息提示 -->
		<u-notice-bar type="success" :list="list"></u-notice-bar>
		<wrap :title="c_parent.c_name" v-for="(c_parent, pi) in category_parent_list" :key="pi">
			<!-- 遍历语言列表 -->
			<van-button @click="selectByChildByCId(c_child1.c_id, 'c_child_right')" v-for="(c_child1, ccindex) in c_parent.child" :key="ccindex">{{ c_child1.c_name }}</van-button>
			<!-- 语言列表分类内容展示 -->
			<van-popup :show="show.c_child_right" position="right" custom-class="right" @close="toggleRightPopup">
				<van-button @click="toggleRightPopup('c_child_right')" class="demo-margin-right">重新选择语言</van-button>
				<wrap title="分类">
					<!-- 遍历某语言下的分类列表 -->
					<van-button @click="selectByInterviewByCId(c_child.c_id, 'right2')" v-for="(c_child, index) in category_child_list" :key="index">
						<u-badge size="mini" :offset="[0, 0]" absolute="true" :count="c_child.count" type="error"></u-badge>
						{{ c_child.c_name }}
					</van-button>
					<u-empty v-if="category_child_list.length == 0" text="列表为空" mode="list"></u-empty>
				</wrap>
				<!-- 某语言分类下内容展示 -->
				<van-popup :show="show.right2" position="right" custom-class="right" @close="toggleRightPopup">
					<van-button @click="toggleRightPopup('right2')">重新选择分类</van-button>
					<u-empty v-if="itemList.length == 0" text="列表为空" mode="list"></u-empty>
					<!-- 面试题列表 -->
					<u-collapse >
						<u-collapse-item @change="records()" :index="index" :title="(index+1) +'、'+item.iq_name" v-for="(item, index) in itemList" :key="index">
							<view style="height: 40px;">
								<button size="mini" type="default" class="mybutton">收藏</button>
								<button size="mini" type="error" class="mybutton">纠错</button>									
							</view>
							<rich-text :nodes="item.iq_content.replace(/\<img/gi, '<img style=max-width:100%;height:auto')"></rich-text>
						</u-collapse-item>
					</u-collapse>
					<u-divider v-if="itemList.length > 0">该分类共{{itemList.length}}道面试题</u-divider>
				</van-popup>
			</van-popup>
		</wrap>
	</div>
</template>

<script>
import wrap from '@/components/wrap';
export default {
	data() {
		return {
			show: {
				//控制是否切换
				c_child_right: false,
				right2: false
			},
			//面试题列表
			itemList: [],
			//顶级分类
			category_parent_list: [],
			// 某语言下面试题分类列表
			category_child_list: [],
			// 消息提示信息
			list: ['路漫漫其修远兮', '吾将上下而求索'],
			queryInfo:{
				pageNum:1,
				pageSize:10,
				cid:'',
				name:''
			}
		};
	},
	onLoad() {
		this.selectCategory()
	},
	methods: {
		/**
		 * 查询顶级分类和二级分类
		 */
		selectCategory(){
			uni.request({
				url:this.$BASEURL+'/category/0',
				method:'GET',
				success: (res) => {
					this.category_parent_list = res.data.data;
				}
			})
		},
		/**
		 * 添加浏览记录,保存进缓存中
		 * @param {Object} item 面试题
		 */
		records(e){
			console.info(e)
			// console.info(item)
			// console.info(flag)
			if(e.show){
				//1.尝试获取缓存中的浏览记录列表
				let res = uni.getStorageSync("itemList");
				console.info(res)
				if(1){//1.1 获取到
					//1.1.0 尝试在浏览记录列表中找到该面试题,如果找到,删除后添加到头上
					//1.1.1 判断列表长度是否大于20,大于20删除最后的一个记录,将新的面试题添加到头上
					//1.1.2 列表长度不大于20,将新的面试题添加到头上
				}else{//1.2 未获取到
					//1.2.1 创建新的浏览记录列表
					//1.2.2 将新的面试题添加到浏览记录列表中
				}
			}
		},
		/**
		 * 根据分类查询面试题列表
		 * @param {Object} c_id
		 * @param {Object} param
		 */
		selectByInterviewByCId(c_id, param){
			this.queryInfo.cid = c_id;
			uni.request({
				url:this.$BASEURL+'/interviewquestions',
				method:'POST',
				data:this.queryInfo,
				success: (res) => {
					this.itemList = res.data.data.list;
				}
			})
			this.toggle(param);
		},
		/**
		 * 查询某语言下面试题分类列表
		 */
		selectByChildByCId(c_id, param) {
			if(param!="right2"){
				uni.request({
					url:this.$BASEURL+'/category/selectCategoryByCid/'+c_id,
					method:'GET',
					success: (res) => {
						this.category_child_list = res.data.data;
					}
				})				
			}
			this.toggle(param);
		},
		/**控制是否切换页面
		 * @param {Object} type
		 */
		toggle(type) {
			this.show[type] = !this.show[type];
		},

		/**点击前后端分类
		 */
		toggleRightPopup(param) {
			//查询后端语言分类
			this.toggle(param);
		}
	},
	components: {
		wrap
	}
};
</script>

<style>
	.mybutton{
		color: #FFFFFF;
		width: 70px;
		background-color: #DD524D;
		float: right;
		margin-right: 10px;
	}
:host {
	font-size: 16px;
}

.center {
	width: 60%;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
}

.top {
	color: #fff;
	width: 100%;
	padding: 20px;
	border-radius: 0;
	line-height: 20px;
	background-color: rgba(0, 0, 0, 0.8) !important;
}

.bottom {
	width: 100%;
	padding: 20px;
	line-height: 100px;
	background-color: #fff;
}

.right {
	width: 100%;
	height: 100%;
	padding: 20px;
}
.van-button {
	margin: 5px;
}
</style>
